/*
 *  Copyright 2025 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
@import (reference) '../../../styles/variables.less';
@selected-color: @primary-color;
@hover-color: @primary-1;
@active-color: @primary-7;
@left-sidebar-icon-size: 28px;

.logo-container {
  height: 40px;
  text-align: left;
  padding: 0 28px;
  margin: 20px 0;
}

.app-container {
  & > .ant-layout-sider {
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.left-sidebar-menu {
  display: flex;
  flex-direction: column;

  .ant-menu-item,
  .ant-menu-submenu {
    color: @grey-600;
  }

  &.ant-menu.ant-menu-vertical,
  &.ant-menu.ant-menu-inline {
    border: none;
    padding: 0 0 0 16px;
    overflow: hidden;

    .ant-menu-submenu-vertical {
      &.ant-menu-submenu-active {
        border: none;
      }
    }

    .ant-menu-submenu.ant-menu-submenu-inline {
      &.ant-menu-submenu-active:not(.ant-menu-submenu-open):not(.ant-menu-submenu-selected) {
        .ant-menu-submenu-title {
          background: @hover-color;
        }
      }

      .anticon {
        svg {
          fill: transparent;
        }
      }

      .ant-menu-submenu-title {
        .ant-menu-title-content {
          line-height: 16px;
          font-weight: 500;
        }
      }

      .ant-menu-item,
      .ant-menu-submenu-title {
        display: flex;
        align-items: center;
        padding: 14px !important;
        height: auto !important;
        margin-bottom: 0px;
        margin-top: 0px;
        border-radius: 12px;

        &.ant-menu-item-selected {
          background: @selected-color;
          color: @white;

          .ant-menu-title-content {
            line-height: 16px;
            font-weight: 500;
          }

          .anticon {
            color: inherit;
          }
        }

        &.ant-menu-item-active:not(.ant-menu-item-selected) {
          background: @hover-color;
        }

        .ant-menu-title-content {
          line-height: 16px;
          font-weight: 500;
        }

        .left-panel-label {
          font-weight: 500;
          color: inherit;
        }
      }
    }

    .ant-menu-item {
      display: flex;
      align-items: center;
      padding: 14px !important;
      height: auto !important;
      margin-bottom: 8px;
      margin-top: 0px;
      border-radius: 12px;

      &.ant-menu-item-active:not(.ant-menu-item-selected) {
        background: @hover-color;

        .anticon {
          color: @active-color;
        }

        .ant-menu-title-content {
          .left-panel-label {
            color: @active-color;
          }
        }
      }

      .ant-menu-title-content {
        line-height: 16px;
        font-weight: 500;
      }

      .left-panel-label {
        font-weight: 500;
        color: inherit;
      }

      a {
        line-height: 20px;
        font-size: 14px;
        font-weight: 500;

        a:hover {
          color: @active-color;
        }
      }

      &.ant-menu-item-selected {
        background-color: @selected-color;
        color: @white;

        svg {
          fill: transparent;
        }

        a,
        a:hover {
          color: @white;
          font-weight: 600;
          line-height: 20px;
          font-size: 14px;
        }
      }
    }

    .ant-menu-item-selected::after {
      content: '';
      border: none;
    }
  }

  .anticon {
    line-height: 0 !important;
    font-size: @left-sidebar-icon-size !important;

    svg {
      fill: transparent;
    }
  }

  .ant-menu-submenu.ant-menu-submenu-open {
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: @primary-4;
    color: @white;
    border-radius: 12px;
    overflow: hidden;

    .ant-menu-submenu-title {
      background-color: @active-color;
      font-weight: 600;
      line-height: 20px;
      font-size: 14px;
      border-radius: 12px 12px 0 0 !important;
      color: @white;
      padding: 14px !important;

      .ant-menu-title-content {
        font-weight: 500;
        line-height: 16px;
      }

      &:hover {
        .left-panel-label {
          color: @active-color;
        }
      }

      .ant-menu-title-content {
        line-height: 16px;

        .left-panel-label {
          color: @white;
          font-weight: 600;
          line-height: 20px;
          font-size: 14px;
        }
      }

      .ant-menu-submenu-arrow {
        color: @white;
      }
    }

    .ant-menu.ant-menu-sub.ant-menu-inline {
      border-radius: 12px;

      .ant-menu-item {
        margin: 0;
        padding: 10px 16px !important;
        border-radius: 0;
        width: calc(100% - 0.01px);

        .anticon {
          font-size: @left-sidebar-icon-size !important;
        }

        &:last-child {
          border-radius: 0 0 12px 12px;
        }
      }
    }
  }

  .ant-menu-submenu {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 8px;
    padding-bottom: 0 !important;

    &.ant-menu-submenu-selected:not(.ant-menu-submenu-open) {
      color: @active-color;

      .ant-menu-submenu-title {
        background: @active-color;
        color: @white;
        border-radius: 12px;

        .ant-menu-submenu-arrow {
          color: @white;
        }
      }
    }
  }

  .ant-menu-submenu > .ant-menu-submenu-title {
    display: flex;
    align-items: center;
    padding: 14px !important;
    height: auto !important;
    line-height: 0 !important;
    margin-bottom: 0px;
    margin-top: 0px;
    border-radius: 12px;

    .ant-menu-title-content {
      .anticon {
        font-size: @left-sidebar-icon-size !important;
      }
    }
  }

  .ant-menu-sub {
    .ant-menu-item {
      display: flex;
      align-items: center;
    }
  }
}

.left-sidebar-layout {
  height: calc(
    100vh - @layout-header-height
  ); // Adjust based on your header height

  .menu-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .top-menu {
    flex-grow: 1;
  }

  .bottom-menu {
    flex-shrink: 0;
  }
}
